<template>
    <div class="editAboutRelationshipStatus">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span>{{language.unify_relationshipStatus}}</span>
            </span>
            <span :class="submitStatus ? 'right rightActive' : 'right'" @click="updateRelationship">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <ul class="editBox">
                <li>
                    <label>{{language.unify_relationshipStatus}}</label>
                    <select class="selectA" @change="updateRelationshipVal" v-model="relationship">
                        <option v-for="item in relationshipRender" :value="item.value">{{item.label}}</option>
                    </select>
                </li>
            </ul>
        </div>
        <loading :props="{type:'page' ,show:ajaxBool}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'editAboutRelationshipStatus',

    components: {
        loading,
        publicDialog
    },

    data: function() {
        return {
            submitStatus: false,
            ajaxBool: false,
            relationship: '',
            dialogData: {},
        }
    },

    activated: function() {
        this.relationship = this.userInfo.about.relationship_status;
    },

    computed: {
        relationshipRender() {
            return Unit.getObjLocalStorage('ms_marital');
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        }
    },

    methods: {
        updateRelationshipVal: function(e) {
            let tthis = this,
                val = _.trim(e.target.value);
            if (parseInt(val) == parseInt(tthis.userInfo.about.relationship_status)) {
                tthis.submitStatus = false;
            } else {
                tthis.submitStatus = true;
            }
        },

        updateRelationship: function(e) {
            let tthis = this,
                userInfo = Unit.getObjSessionStorage("ms_myself") || {};

            if (!tthis.submitStatus) {
                return false
            } else {
                var obj = {
                    data: {
                        marital: tthis.relationship,
                    },
                    processData: function(result) {
                        if (result.errs) {
                            tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: result.errs[0].errmsg,
                                }
                            };
                            return;
                        } else {
                            userInfo.about.relationship_status = result.data.marital;
                            return userInfo;
                        }
                    },
                    complete: function() {
                        tthis.submitStatus = false;
                        tthis.ajaxBool = false;
                        tthis.$router.push({ 'name': 'me' });
                    }
                }
                this.ajaxBool = true;
                this.$store.dispatch('user_updateProfile', obj);
            }
        },
    }
}

</script>
<style scoped>
.editAboutRelationshipStatus {
    background: #fff;
    padding: 44px 0 51px 0;
}

.editAboutRelationshipStatus .editBox {
    margin: 10px 0 0 0;
}

.editAboutRelationshipStatus .editBox li {
    margin: 0 10px;
    border-bottom: 1px dashed #dcdfe3;
    padding: 10px 0;
}

.editAboutRelationshipStatus .editBox li:last-child {
    border-bottom: 0;
}

.editAboutRelationshipStatus .editBox label {
    font-size: 14px;
    color: #000;
    line-height: 16px;
    display: block;
    min-height: 16px;
}

.editAboutRelationshipStatus .editBox select.selectA {
    width: 100%;
    padding: 0;
    color: #999;
    font-size: 14px;
    background: #fff;
    padding: 5px 0;
}

</style>
